事件

<div style="width:150px;height:150px;background-color:#f00"></div>
<script>
    var div = document.getElementsByTagName('div')[0];
</script>

绑定事件 解除清除事件

// 1.
div.onclick = function () {  // 只可绑定一个事件
    test();
    div.onclick = null;  // 解除绑定事件
}
// 2.
div.addEventListener('click', test, false); // 可绑定多个事件，并且按绑定事件顺序执行（IE9 以下不兼容）
div.removeEventListener('click', test, false);  // 清除绑定事件
div.attachEvent('onclick', test);  // IE 独有 一个事件可绑定多个处理函数
div.detachEvent('onclick', test);  // 清除绑定事件

function test () {
    console.log('a');
}

attachEvent 方法不能用 this 指向自己，this 会指向 window

使用 addEventListener(); 给每个 li 绑定一个 click 事件，并输出他们的顺序

<ul><li>a</li><li>b</li><li>c</li></ul>

var liCal = document.getElementsByTagName('li');
for(var i = 0; i < liCal.length; i ++){
    (function(i){
        liCal.addEventListener('click', function(){
            console.log(i);
        }, false)
    })(i)
}

封装一个兼容性 addEvent(elem, type, handle) 方法

function addEvent(elem, type, handle){
    if(elem.addEventListener){
        elem.addEventListener(type, handle, false);
    }else if(elem.attachEvent){
        elem.attachEvent('on' = type, function(){})
    }else{
        elem['on', type] = handle;
    }
}

常用事件

• onclick ：鼠标单击事件
• ondblclick ：鼠标双击事件
• onmousedown ：鼠标按下事件 onmouseenter (h5 新规范)
• onmouseup ：鼠标释放事件 onmouseout (h5 新规范)
• onfocus ：元素获得焦点
• onblur ：元素失去焦点 onchange
• onsubmit ：提交按钮被点击
• onreset ：重置事件
• onselect ：文本被选定
• onload ：页面图像被完成加载
• onunload ：用户退出页面
• onerror ：占位
• onmouseout ：移出对象
• onmousemove ：在对象上移动
• onmouseover ：移过对象
• onscroll ：鼠标滚轮事件

键盘类事件

• onkeyprsee ：单击事件 只能监测到字符类按键（通过 asc 码）
• onkeydown ：按下事件 可监测到所有键盘类事件
• onkeyup ：释放事件

document.onkeypress = function(){
    console.log('keypress');
}
document.onkeydown = function(){
    console.log('keydown');
}
document.onkeyup = function(){
    console.log('keyup');
}

// onkeydown > onkeypress > onkeyup
document.onkeydown = function(e){
    console.log(String.fromCharCode(e.charCode));  // String.fromCharCode() 方法将 unicode 编码转化为字符串
}                                                  // unicode 编码包含 asc 码

触发事件

<input type="text">

var input = document.getElementsByTagName('input')[0];
input.oninput = function(e){  // 得到焦点事件 但凡有变化都会触发事件
    console.log(this.value);
}
var input = document.getElementsByTagName('input')[0];
input.onchange = function(e){  // 鼠标聚焦和失去焦点两个状态发生改变触发事件
    console.log(this.value);
}

onfocus onblur

<input type="text" value="请输入用户名" style="color:#999" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}">

onscroll

document.onscroll = function(){
    console.log('X:' + window.pageXOffset + 'Y:' + window.pageYOffset);
}

// 判断鼠标左、中、右键
document.onmousedown = function(e){
    if(e.button == 0){
        console.log('left');
    }else if(e.button == 1){
        console.log('center');
    }else if(e.button == 2){
        console.log('right');
    }
}

• 取消事件的默认动作：preventDefault()

封装 drag() 方法，实现鼠标拖拽方法

var div = document.getElementsByTagName('div')[0];

// on
function drag(elem) {
    elem.onmousedown = function (e) {
        var e = e || window.event;
        var disX = e.clientX - elem.offsetLeft,
            disY = e.clientY - elem.offsetTop;
        document.onmousemove = function (e) {
            elem.style.left = e.clientX - disX + "px";
            elem.style.top = e.clientY - disY + "px";
        }
    }
    document.onmouseup = function (e) {
        this.onmousemove = null;
    }
}
drag(div);

// addEventListener()
function drag (elem) {
    elem.addEventListener('mousedown', function (e) {
        var e = e || window.event;
        var disX = e.clientX - elem.offsetLeft,
            disY = e.clientY - elem.offsetTop;
        document.addEventListener('mousemove', mouseMove, false);
        document.addEventListener('mouseup', function (e) {
            document.removeEventListener('mousemove', mouseMove, false);
        }, false);
        function mouseMove (e) {
            elem.style.left = e.clientX - disX + "px";
            elem.style.top = e.clientY - disY + "px";
        }
    }, false);
}
drag(div);

div.setCapture(); IE 独有 将 div 的事件硬获取，捕获到自己身上 div.releaseCapture(); 释放 div 获取，捕获的事件

鼠标按下时间过长触发事件

var firstTime = 0,
    lastTime = 0;
var key = false;  // 加锁
document.onmousedown = function () {
    firstTime = new Date().getTime();
}
document.onmouseup = function () {
    lastTime = new Date().getTime();
    if (lastTime - firstTime < 300) {
        key = true;
    }
}
document.onclick = function () {
    if (key) {
        console.log('click');
        key = false;
    }
}